<div data-role="page" data-theme="a" id="recarga" class="pageBradesco">
	<div id="header" data-role="header" data-position="fixed">				
		<h1 class="headerBradesco">Bradesco</h1>
    	<a href="#" data-icon="delete" id="logoutBtn" onclick="logout();" data-theme="d">logout</a>
		<span id="sessionTime">Sessão expira em:<br /><span></span></span>
	</div>
	<div data-role="content" data-theme="a">




		<h3>Recarga de Celular:</h3>
		<div data-role="fieldcontain">

		    <div id="telList">
		    	<div data-role="collapsible" data-collapsed="true" data-theme="d" data-content-theme="a" data-iconpos="right" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
		    	    <h4>Telefones Salvos</h4>
			    	<ul data-role="listview" id="listDisplay">
		    	    </ul>
		    	</div>
		    	<form id="formRecarga" name="formRecarga">
			    	<ul data-role="listview" data-inset="true">
			    	    <li data-role="list-divider">Adicionar Telefone</li>
				        <li data-role="fieldcontain">
				            <input type="text" name="nameAddList" id="nameAddList" placeholder="Nome" value="" data-clear-btn="true">
				        </li>
				        <li data-role="fieldcontain">
				        	<div class="ui-grid-a">
				        		<div class="ui-block-a">
						            <select name="estadoAddList" required patter="[A-Z]{2}" id="estadoAddList">
						                <option value="0">UF</option>
						            </select>
			        			</div>
				        		<div class="ui-block-b">
						            <select name="opAddList" required pattern="[0-9]" id="opAddList" disabled>
						                <option value="0">Operadora</option>
						            </select>
			        			</div>
		        			</div>
				        </li>
				        <li data-role="fieldcontain">
				        	<div class="ui-grid-a">
				        		<div class="ui-block-a">
				        			<input type="number" name="dddFirst" id="dddFirst" required pattern="[0-9]{2}" placeholder="DDD" value="" data-clear-btn="true">
			        			</div>
				        		<div class="ui-block-b">
				            		<input type="number" name="telFirst" id="telFirst" required pattern="[0-9]{8,9}" placeholder="Telefone" value="" data-clear-btn="true">
			        			</div>
		        			</div>
				        </li>
				        <li data-role="fieldcontain">
				        	<div class="ui-grid-a">
				        		<div class="ui-block-a">
				        			<input type="number" name="dddConf" id="dddConf" required pattern="[0-9]{2}" placeholder="DDD" value="" data-clear-btn="true">
			        			</div>
				        		<div class="ui-block-b">
				            		<input type="number" name="telConf" id="telConf" required pattern="[0-9]{8,9}" placeholder="Telefone" value="" data-clear-btn="true">
			        			</div>
		        			</div>
				        </li>
				        <li data-role="fieldcontain"><form>
							  	<label for="recargaValor">Valor: R$</label>
							  	<input type="range" name="recargaValor" id="recargaValor" required min="5" max="100" value="50" data-popup-enabled="true">
							</form>
				        </li>
				        <li data-role="fieldcontain">
							<input type="submit" value="Prosseguir" id="nextRecarga" name="nextRecarga" data-theme="d" />
				        </li>
				        <li data-role="fieldcontain">
				        	<div class="ui-grid-a">
				        		<div class="ui-block-a">
				           			<label for="addToList">Adicionar à Lista:</label>
			        			</div>
				        		<div class="ui-block-b">
						            <select name="addToList" id="addToList" data-role="slider" data-theme="d">
						                <option value="off">Não</option>
						                <option value="on">Sim</option>
						            </select>
			        			</div>
		        			</div>
				        </li>
			    	</ul>
		    	</form>
	    	</div>					
		</div>
	</div>




	<div data-role="footer" id="footer" data-id="footer" data-position="fixed" class="nav-bradesco ui-footer ui-bar-d">
		<div data-role="navbar" class="nav-bradesco ui-navbar ui-mini" data-theme="d" role="navigation">
			<ul>
				<li><a id="menu" onclick="$.mobile.changePage('menu.html')" data-icon="custom">Menu</a></li>
				<li><a id="subscribe" data-icon="custom">Subscribe</a></li>
				<li><a id="mapa" onclick="$.mobile.changePage('mapa.html')" data-icon="custom">Mapa</a></li>
				<li><a id="token" onclick="generateToken();" data-icon="custom">Token</a></li>
			</ul>
		</div>
	</div>
</div>